<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="skins/all.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <script src="js/footer.js" type="text/javascript"></script>
    <script src="js/iCheck.js" type="text/javascript"></script>
    <script src="js/custom.js" type="text/javascript"></script>

    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--参数校验工具-->
    <script src="validation-1.19.2/jquery.validate.min.js"></script>
    <script src="validation-1.19.2/localization/messages_zh.min.js"></script>
    <!--导入 vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <title>订单管理</title>
</head>
<script type="text/javascript">
  $(document).ready(function () {

      /*  $('#CheckedAll').on('ifChecked', function (event) {
            $('input').iCheck('check');
        });
        $('#CheckedAll').on('ifUnchecked', function (event) {
            $('input').iCheck('uncheck');
        });*/
        //全选
//   $("#CheckedAll").click(function () {
//	   if (this.checked) {                 //如果当前点击的多选框被选中
//		   $('ifChecked').attr("check", true);
//	   } else {
//		   $('ifUnchecked').attr("uncheck", false);
//	   }
//   });
//   $('input[type=checkbox][name=checkitems]').click(function () {
//	   var flag = true;
//	   $('input[type=checkbox][name=checkitems]').each(function () {
//		   if (!this.checked) {
//			   flag = false;
//		   }
//	   });
//
//	   if (flag) {
//		   $('#CheckedAll').attr('checked', true);
//	   } else {
//		   $('#CheckedAll').attr('checked', false);
//	   }
//   });
        //输出值

    })
</script>
<body>
<head>
    <div id="header_top">
        <div id="top">
            <div class="Inside_pages">
                <div class="Collection"><a href="login.html" class="green">请登录</a> <a href="register.html"
                                                                                      class="green">免费注册</a></div>
                <div class="hd_top_manu clearfix">
                    <ul class="clearfix">
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="user_center.html">用户中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="message_center.html">消息中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="goodsList.html">商品分类</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="header" class="header page_style">
            <div class="logo"><a href="index.html"><img src="images/logo.png"/></a></div>

            <!--结束图层-->
            <div class="Search">
                <div class="search_list">
                    <ul>
                        <li class="current"><a href="#">产品</a></li>
                        <li><a href="#">信息</a></li>
                    </ul>
                </div>
                <div class="clear search_cur">
                    <input name="searchName" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text">
                    <input name="" type="submit" value="搜 索" class="Search_btn"/>
                </div>
                <div class="clear hotword">热门搜索词：香醋&nbsp;&nbsp;&nbsp;茶叶&nbsp;&nbsp;&nbsp;草莓&nbsp;&nbsp;&nbsp;葡萄&nbsp;&nbsp;&nbsp;菜油</div>
            </div>


        </div>

        <!--菜单栏-->
        <div class="Navigation" id="Navigation" style="padding-left: 420px;">
            <ul class="Navigation_name">
                <li><a href="Home.html">首页</a></li>
                <li class="hour"><a href="半小时圈主页.html">半小时生活圈</a></li>
                <li><a href="产品-产品列表(预售).html">预售专区</a><em class="hot_icon"></em></li>
                <li><a href="店铺首页.html">好评商户</a></li>
                <li><a href="goodsList.html">热销活动</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
        <script>$("#Navigation").slide({titCell: ".Navigation_name li", trigger: "click"});</script>
    </div>
</head>
<div class="Inside_pages clearfix">
    <div class="left_style">
        <!--列表-->
        <div class="menu_style">
            <ul class="menu_list">
                <li class="on"><em></em><a href="店铺专区.html">店铺专区</a></li>
                <li><em></em><a href="goods_division.html">商品专区</a></li>
                <li><em></em><a href="order_manage.html">订单专区</a></li>
                <li><em></em><a href="发货管理.html">发货管理</a></li>
            </ul>
        </div>
    </div>
    <div class="right_style" id="showOrder">
        <div class="title_style"><em></em>订单管理</div>
        <div class="Order_form_style">
            <div class="Order_Operation">
                <div class="left"><label><input name="" type="checkbox" value="" class="checkbox" v-model="checked" @change="changeAllChecked()"/>全选</label>
                    <input  type="submit" value="批量确认收货" class="confirm_Order" @click="updateStatus()"/></div>
                <div class="right_search">
                    <input name="number_o" type="text" id="number_12" class="add_Ordertext number_12" value="" placeholder="请输入订单号进行搜索" @input="searchByNumber($event)"/>
                    <input name="" value="搜索订单" class="search_order" @click="findByNumber()"/></div>

            </div>
            <div id="orderList">
                <div class="Order_form_list">
                    <table>
                        <thead>
                        <tr>
                            <td class="list_name_title0">商品</td>
                            <td class="list_name_title1">单价(元)</td>
                            <td class="list_name_title2">数量</td>
                            <td class="list_name_title4">实付款(元)</td>
                            <td class="list_name_title5">订单状态</td>
                            <td class="list_name_title6">操作</td>
                        </tr>
                        </thead>


                        <tbody v-for="order in orders_list" >
                        <tr class="Order_info">
                            <td colspan="6" class="Order_form_time"><input name="" type="checkbox" :value=order v-model="checkedIds"
                                                                           class="checkbox"/>下单时间：{{ order.createTime }} |
                                订单号：{{ order.orderNumber }} <em></em></td>
                        </tr>
                        <tr class="Order_Details">
                            <td colspan="3">
                                <table class="Order_product_style">
                                    <tbody>
                                    <tr v-for="good in order.good">
                                        <td>
                                            <div class="product_name clearfix">
                                                <a href="#" class="product_img"><img :src="good.goodImg" width="80px"
                                                                                     height="80px"></a>
                                                <a href="3" class="p_name">{{ good.goodName }}</a>

                                            </div>
                                        </td>
                                        <td>{{ good.goodPrice }}</td>
                                        <td>{{ good.goodCount }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td class="split_line">{{ order.money }}</td>

                            <!--商家已发货-->
                            <td class="split_line">
                                <p style="color:#F30">已发货，待收货</p>
                            </td>
                            <td class="operating">
                                <a href="#">查看订单</a>
                                <a href="#">在线客服</a>
                                <a style="cursor: pointer;" class="Delivery_btn"
                                   @click="UpdateOr(order)">确认发货</a>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<script>
    $(document).ready(function () {
        $('.Order_form_style input').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass: 'iradio_flat-green'
        });
    });
</script>-->
<!--网站地图-->
<div class="fri-link-bg clearfix">
    <div class="fri-link">
        <div class="logo left margin-r20"><img src="images/fo-logo.jpg" width="152" height="81"/></div>
        <div class="left"><img src="images/qd.jpg" width="90" height="90"/>
            <p>扫描下载APP</p>
        </div>
        <div class="">
            <dl>
                <dt>新手上路</dt>
                <dd><a href="#">售后流程</a></dd>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">订购方式</a></dd>
                <dd><a href="#">隐私声明 </a></dd>
                <dd><a href="#">推荐分享说明 </a></dd>
            </dl>
            <dl>
                <dt>配送与支付</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>售后保障</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
        </div>
    </div>
</div>
<!--网站地图END-->
<!--网站页脚-->
<div class="copyright">
    <div class="copyright-bg">
        <div class="hotline">为生活充电在线 <span>招商热线：****-********</span> 客服热线：400-******</div>
        <div class="hotline co-ph">
            <p>版权所有Copyright ©***************</p>
            <p>*ICP备***************号 不良信息举报</p>
            <p>总机电话：****-*********/194/195/196 客服电话：4000****** 传 真：********

                <a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
        </div>
    </div>
</div>
</body>
</html>

<script>

    let user = getCookie("busMassage");
    if (user == null) {
        alert("用户未登录，请登录");
        location.href = '/views/login.html';
    }

    var vm1 = new Vue({
        el: '#showOrder',
        data: {
            checked:false,
            orders_list: [],      /*订单所有信息*/
            userMessage: [],      /*用户信息*/
            checkedIds:[],       /*已选订单*/
            checkArr:[],
            checkAll:[],
            searchNumber:"",
        },
        methods: {

            /*确认发货按钮*/
            getGoodsOrderList: function () {
                let thisObj = this;

                //获取用户登录信息
                let cookie = getCookie("busMassage");
                let user = JSON.parse(cookie);
                thisObj.userMessage = user;


                let url = "order/searchAllOrderByOrderNumber.do";
                let params = {
                    orderStatus: 1,

                };
                postWithJson(url, params, function (data) {

                    thisObj.orders_list = data;
                });
            },


            UpdateOr: function (order) {
                let vue_quote = this;


                let url = "order/updateOrder.do";
                let params={
                    orderNumber:order.orderNumber,
                    orderStatus:2
                }
                postWithJson(url, params, function (data) {

                vue_quote.getGoodsOrderList();
                });
            },
            /*input输入框赋值*/
            searchByNumber(event){
                let inputValue = event.currentTarget.value;
                this.searchNumber = inputValue;
            },
            findByNumber: function () {
                let thisObj = this;

                let param={
                    orderNumber:thisObj.searchNumber
                }
                if (this.searchNumber==""){
                    thisObj.getGoodsOrderList();
                    return ;
                }
                let url = "order/searchOrderByOrderNumber.do";
                postWithJson(url, param, function (data) {

                    thisObj.orders_list = [data];


                });
            },
            changeAllChecked(){
                let thisObj=this;
                if(this.checked){
                    thisObj.orders_list.forEach(function (order) {
                        thisObj.checkArr.push(order);
                    })
                    thisObj.checkedIds=thisObj.checkArr;
                    thisObj.checkArr=[];
                }else {
                    thisObj.checkedIds=[];
                }
            },
            updateStatus(){
                let thisObj=this;
                let url='/order/updateOrder.do'
                thisObj.checkedIds.forEach(function (order) {
                    let params={
                        orderId:order.orderId,
                        orderStatus:2,
                        orderNumber:order.orderNumber
                    }
                    postWithJson(url,params,function(data){
                            thisObj.getGoodsOrderList();
                    })

                })
            }
        },
        /**页面加载完成后调用*/
        mounted: function () {
            this.getGoodsOrderList();
        },
        watch:{}
    });

</script>